import React, { useState } from 'react';
import { Search, X, Filter } from 'lucide-react';

const SearchBox = ({ onSearch, onFilter, filters = {} }) => {
  const [query, setQuery] = useState('');
  const [showFilters, setShowFilters] = useState(false);
  const [selectedPlatforms, setSelectedPlatforms] = useState(filters.platforms || []);
  const [timeRange, setTimeRange] = useState(filters.timeRange || '24h');

  const platforms = ['微博', '知乎', '百度', 'B站', '抖音'];
  const timeRanges = [
    { value: '1h', label: '1小时' },
    { value: '24h', label: '24小时' },
    { value: '7d', label: '7天' },
    { value: '30d', label: '30天' },
  ];

  const handleSearch = (e) => {
    e.preventDefault();
    onSearch && onSearch(query);
  };

  const handlePlatformToggle = (platform) => {
    const newPlatforms = selectedPlatforms.includes(platform)
      ? selectedPlatforms.filter(p => p !== platform)
      : [...selectedPlatforms, platform];
    
    setSelectedPlatforms(newPlatforms);
    onFilter && onFilter({
      platforms: newPlatforms,
      timeRange
    });
  };

  const handleTimeRangeChange = (range) => {
    setTimeRange(range);
    onFilter && onFilter({
      platforms: selectedPlatforms,
      timeRange: range
    });
  };

  const clearQuery = () => {
    setQuery('');
    onSearch && onSearch('');
  };

  return (
    <div className="bg-white rounded-lg border border-gray-200 p-4">
      {/* 搜索框 */}
      <form onSubmit={handleSearch} className="relative mb-4">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
          <input
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="搜索热点话题..."
            className="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
          />
          {query && (
            <button
              type="button"
              onClick={clearQuery}
              className="absolute right-8 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
            >
              <X className="h-4 w-4" />
            </button>
          )}
          <button
            type="button"
            onClick={() => setShowFilters(!showFilters)}
            className={`absolute right-2 top-1/2 transform -translate-y-1/2 p-1 rounded transition-colors ${
              showFilters ? 'text-primary-600 bg-primary-50' : 'text-gray-400 hover:text-gray-600'
            }`}
          >
            <Filter className="h-4 w-4" />
          </button>
        </div>
      </form>

      {/* 筛选器 */}
      {showFilters && (
        <div className="space-y-4 pt-4 border-t border-gray-100 animate-slide-up">
          {/* 平台筛选 */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              平台筛选
            </label>
            <div className="flex flex-wrap gap-2">
              {platforms.map((platform) => (
                <button
                  key={platform}
                  onClick={() => handlePlatformToggle(platform)}
                  className={`px-3 py-1 text-sm rounded-full border transition-colors ${
                    selectedPlatforms.includes(platform)
                      ? 'bg-primary-100 text-primary-800 border-primary-300'
                      : 'bg-gray-50 text-gray-600 border-gray-300 hover:bg-gray-100'
                  }`}
                >
                  {platform}
                </button>
              ))}
            </div>
          </div>

          {/* 时间范围 */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              时间范围
            </label>
            <div className="flex flex-wrap gap-2">
              {timeRanges.map((range) => (
                <button
                  key={range.value}
                  onClick={() => handleTimeRangeChange(range.value)}
                  className={`px-3 py-1 text-sm rounded-full border transition-colors ${
                    timeRange === range.value
                      ? 'bg-primary-100 text-primary-800 border-primary-300'
                      : 'bg-gray-50 text-gray-600 border-gray-300 hover:bg-gray-100'
                  }`}
                >
                  {range.label}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default SearchBox;